Kattava opas CSS @font-face -säännön käyttöön mukautettujen fonttien lataamisessa, sisältäen optimointitekniikoita verkkosivuston suorituskyvyn ja käyttökokemuksen parantamiseksi globaalisti.
CSS Font Face: Mukautettujen fonttien lataus- ja optimointistrategiat globaaliin web-suunnitteluun
Typografialla on kriittinen rooli verkkosivustojen suunnittelussa, sillä se muokkaa käyttökokemusta ja viestii brändisi identiteettiä. CSS:n @font-face-sääntö antaa kehittäjille mahdollisuuden upottaa mukautettuja fontteja suoraan verkkosivustoilleen, mikä tarjoaa paremman hallinnan tekstin visuaaliseen esitykseen ja mahdollistaa ainutlaatuisemman ja mukaansatempaavamman käyttökokemuksen. Väärin toteutettuna se voi kuitenkin johtaa suorituskykyongelmiin, jotka vaikuttavat verkkosivuston latausaikoihin ja heikentävät käyttäjätyytyväisyyttä, erityisesti alueilla, joilla on hitaammat internetyhteydet.
Tämä kattava opas tutkii @font-face-säännön hienouksia, kattaen parhaat käytännöt mukautettujen fonttien lataamiseen ja optimointistrategiat saumattoman ja suorituskykyisen kokemuksen varmistamiseksi globaalille yleisölle. Perehdymme erilaisiin fonttimuotoihin, optimointitekniikoihin ja edistyneisiin ominaisuuksiin auttaaksemme sinua hallitsemaan web-typografian taidon.
@font-face-säännön ymmärtäminen
@font-face-sääntö on tehokas CSS-at-sääntö, jonka avulla voit määrittää mukautettuja fonttitiedostoja ladattavaksi ja käytettäväksi verkkosivustollasi. Se käytännössä siltaa kuilun rajoitetun järjestelmäfonttivalikoiman ja mukautetun typografian laajan maailman välillä.
Tässä on perussyntaksi:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Käydään läpi sen osat:
font-family: Tämä ominaisuus määrittelee nimen, jolla viittaat mukautettuun fonttiin CSS-säännöissäsi. Valitse kuvaava ja ainutlaatuinen nimi.src: Tämä ominaisuus määrittää fonttitiedostojen sijainnin. Voit antaa useita lähteitä, jolloin selain voi valita optimaalisen muodon omien kykyjensä perusteella.format()-funktio ilmaisee kunkin tiedoston fonttimuodon.font-weight: Tämä ominaisuus määrittelee fontin painon (lihavuuden). Yleisiä arvoja ovatnormal,bold,lighter,bolderja numeeriset arvot kuten100,400,700jne.font-style: Tämä ominaisuus määrittelee fontin tyylin (esim.normal,italic,oblique).
Kun fontti on määritelty, voit käyttää sitä CSS-säännöissäsi näin:
body {
font-family: 'MyCustomFont', sans-serif;
}
Tämä ottaa 'MyCustomFont'-fontin käyttöön koko verkkosivuston body-elementissä. sans-serif on varafontti, jota käytetään, jos mukautettu fontti ei lataudu.
Oikeiden fonttimuotojen valinta: Globaali näkökulma
Eri selaimet tukevat eri fonttimuotoja. Laajan yhteensopivuuden varmistamiseksi on tärkeää tarjota fontit useassa eri muodossa. Tässä on erittely yleisimmistä fonttimuodoista ja niiden selaintuesta:
- WOFF2 (Web Open Font Format 2): Nykyaikaisin ja vahvasti suositeltu muoto, joka tarjoaa ylivoimaisen pakkauksen ja suorituskyvyn. Kaikkien nykyaikaisten selainten tukema.
- WOFF (Web Open Font Format): Laajalti tuettu muoto, joka tarjoaa hyvän pakkauksen. Edelleen relevantti vanhemmille selaimille.
- EOT (Embedded Open Type): Suunniteltu erityisesti Internet Exploreria varten. Yleensä ei enää tarpeellinen, ellet ehdottomasti joudu tukemaan IE:n hyvin vanhoja versioita.
- TTF (TrueType Font) / OTF (OpenType Font): Vanhempia muotoja, jotka ovat yleensä kooltaan suurempia ja vähemmän optimoituja web-käyttöön. Vältä näiden suoraa käyttöä aina kun mahdollista.
- SVG Fonts: Vanhempi muoto, jota ei nykyään juurikaan käytetä selaintuen ja muiden rajoitusten vuoksi.
Suositus: Käytä WOFF2-muotoa ensisijaisena muotona ja tarjoa WOFF varavaihtoehtona vanhemmille selaimille. Harkitse EOT-muotoa vain, jos sinun on tuettava Internet Explorerin hyvin vanhoja versioita.
Tässä esimerkki useiden fonttimuotojen tarjoamisesta @font-face-säännössäsi:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* For older IE */
font-weight: normal;
font-style: normal;
}
Fonttien latausstrategiat: Nopeuden ja käyttökokemuksen optimointi
Tapa, jolla lataat fonttisi, voi vaikuttaa merkittävästi verkkosivustosi suorituskykyyn. Tässä on useita fonttien latausstrategioita, joita voit käyttää:
1. Perus fontin lataus (oletuskäyttäytyminen)
Oletusarvoisesti selaimet yleensä estävät tekstin renderöinnin, kunnes fontti on ladattu. Tämä voi johtaa koettuun suorituskyvyn pullonkaulaan, jossa käyttäjät näkevät tyhjän ruudun tai näkymätöntä tekstiä lyhyen ajan (tätä kutsutaan usein nimellä "flash of invisible text" tai FOIT).
Vaikka tämä lähestymistapa on helppo toteuttaa, sitä ei yleensä suositella optimaalisen käyttökokemuksen kannalta.
2. font-display-ominaisuuden käyttäminen
font-display-ominaisuus tarjoaa enemmän hallintaa siihen, miten fontit ladataan ja näytetään. Sen avulla voit mukauttaa käyttäytymistä fontin latausprosessin aikana, mikä tarjoaa sujuvamman kokemuksen käyttäjillesi. Tämä on suositeltu lähestymistapa useimmissa tilanteissa.
Tässä ovat mahdolliset arvot font-display-ominaisuudelle:
auto: Selain käyttää oletusarvoista fontin latausstrategiaansa (tyypillisesti FOIT).block: Antaa fontille lyhyen estojakson ja äärettömän vaihtoajan. Selain piilottaa tekstin aluksi ja näyttää sen sitten, kun fontti on ladattu. Jos fonttia ei ladata lyhyessä ajassa (tyypillisesti 3 sekuntia), näytetään varafontti.swap: Antaa fontille nollan estojakson ja äärettömän vaihtoajan. Selain näyttää tekstin välittömästi varafontilla. Kun mukautettu fontti on ladattu, teksti vaihdetaan mukautettuun fonttiin. Tämä välttää FOIT-ilmiön, mutta voi johtaa "flash of unstyled text" (FOUT) -ilmiöön, eli tyylittömän tekstin välähdykseen.fallback: Antaa fontille hyvin lyhyen estojakson ja lyhyen vaihtoajan. Tämä on kompromissiblock- jaswap-arvojen välillä. Selain piilottaa tekstin hyvin lyhyeksi ajaksi ja vaihtaa sitten varafonttiin, jos mukautettua fonttia ei ole ladattu. Se jatkaa fonttien vaihtamista lyhyen aikaa, jonka jälkeen se lopettaa ja käyttää yksinkertaisesti varafonttia.optional: Antaa fontille erittäin lyhyen estojakson eikä lainkaan vaihto-aikaa. Hyödyllinen fonteille, jotka eivät ole kriittisiä sivun alkuperäisen renderöinnin kannalta (esim. ei-välttämättömissä käyttöliittymäelementeissä käytetyt fontit).
Suositukset:
- Useimmissa tapauksissa
swaptarjoaa parhaan tasapainon koetun suorituskyvyn ja visuaalisen vakauden välillä. Käyttäjät näkevät tekstin välittömästi, vaikka se olisi aluksi tyylitelty varafontilla. - Käytä
fallback-arvoa, jos haluat minimoida FOUT-ilmiön, mutta silti priorisoida mukautetun fontin. - Käytä
optional-arvoa ei-kriittisille fonteille estääksesi sivun renderöinnin tarpeettoman estämisen.
Esimerkki font-display: swap -ominaisuuden käytöstä:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Fonttien esilataaminen
Fonttien esilataaminen voi parantaa suorituskykyä ohjeistamalla selainta lataamaan fonttitiedostot mahdollisimman aikaisin. Tämä voi vähentää fontin lataukseen liittyvää viivettä, mikä johtaa nopeampaan koettuun latausaikaan.
Käytä <link rel="preload"> -tagia HTML-dokumenttisi <head>-osiossa fonttien esilataamiseen:
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Selitys:
rel="preload": Määrittää, että resurssi tulisi esiladata.href: Määrittää fonttitiedoston URL-osoitteen.as="font": Määrittää esiladattavan resurssin tyypin (tässä tapauksessa fontti).type="font/woff2": Määrittää fonttitiedoston MIME-tyypin.crossorigin: Vaaditaan, jos fontti ladataan eri alkuperästä (esim. CDN-verkosta).
Varoitus: Liian monien resurssien esilataaminen voi vaikuttaa negatiivisesti suorituskykyyn. Esilataa vain ne fontit, jotka ovat kriittisiä sivun alkuperäisen renderöinnin kannalta.
4. Font Loading API (edistynyt)
Font Loading API tarjoaa yksityiskohtaisemman tason hallintaa fonttien lataukseen. Sen avulla voit havaita, milloin fontti on ladattu, seurata latauksen edistymistä ja käsitellä virheitä. Tämä voi olla hyödyllistä monimutkaisempien fonttien latausstrategioiden toteuttamisessa.
Esimerkki (JavaScript):
document.fonts.load('1em MyCustomFont').then(function() {
// Fontti on ladattu onnistuneesti
console.log('MyCustomFont ladattu!');
});
Font Loading API on monimutkaisempi käyttää kuin font-display-ominaisuus, mutta se tarjoaa enemmän joustavuutta edistyneisiin käyttötapauksiin.
Fonttitiedostojen optimointi: Koon pienentäminen ja suorituskyvyn parantaminen
Fonttitiedostojen optimointi on ratkaisevan tärkeää verkkosivuston suorituskyvyn parantamiseksi ja latausaikojen lyhentämiseksi. Tässä on useita tekniikoita, joita voit käyttää:
1. Fonttien osittaminen (Subsetting)
Useimmat fontit sisältävät suuren määrän glyyfejä (merkkejä), joista monia ei ehkä käytetä verkkosivustollasi. Fonttien osittamisessa poistetaan käyttämättömät glyyfit fonttitiedostosta, mikä pienentää sen kokoa merkittävästi. Tämä on erityisen tärkeää, kun tuetaan useita kieliä, sillä fontit voivat sisältää glyyfejä merkeille, joita ei käytetä tietyllä alueella.
Hyödyt:
- Pienempi fonttitiedoston koko
- Nopeammat latausajat
- Parempi verkkosivuston suorituskyky
Työkaluja fonttien osittamiseen:
- FontForge (Open Source): Tehokas työpöytäsovellus fonttien muokkaamiseen, jonka avulla voit osittaa fontteja manuaalisesti.
- Glyphhanger (Komentorivi): Komentorivityökalu, joka tunnistaa käyttämättömät glyyfit ja luo osajoukkoja.
- Online-työkalut fonttien osittamiseen: Saatavilla on useita online-työkaluja fonttien osittamiseen, kuten Font Squirrelin Webfont Generator.
Unicode-range
Monikielisillä sivustoilla unicode-range CSS-kuvainta voidaan käyttää määrittämään, mille Unicode-merkkialueille fonttia tulisi käyttää. Tämä antaa selaimelle mahdollisuuden ladata vain tarvittavat osat fontista, mikä parantaa suorituskykyä. Tämä on erityisen hyödyllistä käsiteltäessä kieliä, joilla on suuret merkkijärjestelmät, kuten kiina, japani ja korea (CJK).
Esimerkki:
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Yleiset CJK-yhdistetyt ideogrammit */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Pakkaus
Varmista, että fonttitiedostosi on pakattu asianmukaisesti käyttämällä Gzip- tai Brotli-pakkausta. Useimmat verkkopalvelimet tukevat näitä pakkausalgoritmeja, jotka voivat pienentää fonttitiedostojen kokoa merkittävästi siirron aikana.
Hyödyt:
- Pienempi tiedostokoko siirron aikana
- Nopeammat latausajat
3. SVG-fonttien optimointi
Jos käytät SVG-fontteja (vaikka niitä ei yleensä suositella), optimoi SVG-tiedostot SVGO:n (SVG Optimizer) kaltaisilla työkaluilla poistaaksesi tarpeettoman metadatan ja pienentääksesi tiedostokokoa.
4. Variable Fonts (Muuttuvat fontit)
Muuttuvat fontit ovat suhteellisen uusi fonttiteknologia, joka mahdollistaa sen, että yksi fonttitiedosto sisältää useita variaatioita kirjasintyypistä, kuten eri painoja, leveyksiä ja tyylejä. Tämä voi pienentää merkittävästi kokonaistiedostokokoa verrattuna erillisten fonttitiedostojen käyttämiseen kutakin variaatiota varten.
Hyödyt:
- Pienemmät tiedostokoot verrattuna perinteisiin fonttimuotoihin, kun käytetään useita variaatioita
- Suurempi suunnittelun joustavuus
5. Välimuisti
Määritä verkkopalvelimesi tallentamaan fonttitiedostot oikein välimuistiin. Tämä antaa selaimille mahdollisuuden tallentaa fonttitiedostot paikallisesti, mikä vähentää tarvetta ladata niitä toistuvasti seuraavilla vierailuilla.
Hyödyt:
- Nopeammat latausajat palaaville kävijöille
- Pienempi palvelimen kuormitus
Saavutettavuusnäkökohdat
Kun käytät mukautettuja fontteja, on tärkeää ottaa huomioon saavutettavuus varmistaaksesi, että verkkosivustosi on kaikkien käytettävissä, mukaan lukien vammaiset henkilöt.
1. Riittävä kontrasti
Varmista, että tekstin väri tarjoaa riittävän kontrastin taustaväriä vasten WCAG (Web Content Accessibility Guidelines) -standardien täyttämiseksi. Käytä kontrastintarkistustyökalua varmistaaksesi, että kontrastisuhde on riittävä.
2. Luettava fonttikoko
Käytä riittävän suurta fonttikokoa, jotta se on helposti luettavissa, erityisesti näkövammaisille käyttäjille. Vältä liian pienten fonttikokojen käyttöä.
3. Fontin paino
Valitse fontin paino, joka on helposti luettavissa. Vältä liian ohuiden tai kevyiden fonttien käyttöä, sillä ne voivat olla vaikeita lukea joillekin käyttäjille.
4. Varafantit
Tarjoa asianmukaiset varafantit CSS-säännöissäsi varmistaaksesi, että teksti on edelleen luettavissa, vaikka mukautettu fontti ei latautuisi. Valitse varafontteja, jotka ovat tyyliltään ja ulkonäöltään samankaltaisia kuin mukautettu fontti.
5. Tekstin koon muuttaminen
Varmista, että käyttäjät voivat helposti muuttaa tekstin kokoa verkkosivustollasi selaimen zoomauksen tai muiden saavutettavuustyökalujen avulla. Vältä kiinteän koon yksiköiden (esim. pikselit) käyttöä fonttiko'oissa. Käytä sen sijaan suhteellisia yksiköitä (esim. em, rem).
6. Kielimääritteet
Aseta lang-attribuutti oikein <html>-tagiin ilmaisemaan sivun kielen. Tämä auttaa ruudunlukijoita ja muita avustavia tekniikoita renderöimään tekstin oikein.
Esimerkki:
<html lang="en">
<head>
<title>My Website</title>
</head>
<body>
<p>This is some text in English.</p>
</body>
</html>
Selainyhteensopivuus
Varmista, että mukautetut fonttisi ovat yhteensopivia laajan selainvalikoiman kanssa. Testaa verkkosivustoasi eri selaimilla ja laitteilla tunnistaaksesi mahdolliset yhteensopivuusongelmat. Käytä BrowserStackin tai Sauce Labsin kaltaisia työkaluja testataksesi verkkosivustoasi erilaisilla selaimilla ja käyttöjärjestelmillä.
Harkitse CSS-nollaustyylisivun (esim. Normalize.css) käyttöä normalisoidaksesi oletustyylit eri selainten välillä.
Yleisimmät vältettävät sudenkuopat
- Liian monen mukautetun fontin käyttäminen: Liian monen mukautetun fontin käyttäminen voi vaikuttaa negatiivisesti suorituskykyyn ja luoda sekavan visuaalisen kokemuksen. Rajoita verkkosivustollasi käytettävien mukautettujen fonttien määrä enintään kahteen tai kolmeen.
- Suurten fonttitiedostojen käyttäminen: Suuret fonttitiedostot voivat pidentää latausaikoja merkittävästi. Optimoi fonttitiedostosi yllä kuvatuilla tekniikoilla.
- Varafonttien unohtaminen: Varafonttien unohtaminen voi johtaa näkymättömään tekstiin, jos mukautettu fontti ei lataudu.
- Saavutettavuusnäkökohtien sivuuttaminen: Saavutettavuusnäkökohtien sivuuttaminen voi tehdä verkkosivustostasi käyttökelvottoman vammaisille henkilöille.
- Testaamatta jättäminen eri selaimilla: Testaamatta jättäminen eri selaimilla voi johtaa yhteensopivuusongelmiin.
- Fonttitiedostojen suora linkittäminen suunnittelijan sivustolta tai muista epäluotettavista lähteistä: Isännöi fontteja vain omalta verkkosivustoltasi, CDN-verkosta tai hyvämaineisesta fonttipalvelusta.
Parhaat käytännöt globaaliin web-typografiaan
Kun suunnittelet verkkosivustoja globaalille yleisölle, on tärkeää ottaa huomioon seuraavat parhaat käytännöt web-typografiassa:
- Valitse fontteja, jotka tukevat useita kieliä: Valitse fontteja, jotka sisältävät glyyfit niille kielille, joita aiot tukea verkkosivustollasi.
- Käytä sopivia fonttikokoja eri kielille: Fonttikoot, jotka sopivat yhdelle kielelle, eivät välttämättä sovi toiselle. Säädä fonttikokoja tarpeen mukaan varmistaaksesi luettavuuden eri kielillä.
- Harkitse riviväliä ja kirjainväliä: Riviväli ja kirjainväli voivat vaikuttaa luettavuuteen, erityisesti kielillä, joissa on monimutkaiset merkkijärjestelmät. Säädä näitä arvoja tarpeen mukaan optimoidaksesi luettavuuden.
- Käytä sopivaa tekstin tasausta: Sopiva tekstin tasaus voi vaihdella kielestä riippuen. Esimerkiksi vasemmalta oikealle -kielet käyttävät tyypillisesti vasenta tasausta, kun taas oikealta vasemmalle -kielet käyttävät tyypillisesti oikeaa tasausta.
- Testaa verkkosivustoasi eri kielillä: Testaa verkkosivustoasi eri kielillä varmistaaksesi, että typografia näyttää oikealta ja on helposti luettavissa.
Esimerkki: Globaalia merkkijärjestelmätukea tarjoavan fontin käyttäminen
Harkitse Noto Sans -fontin käyttöä, joka on suunniteltu tukemaan laajaa valikoimaa kieliä ja kirjoitusjärjestelmiä. Google tarjoaa Noto Sansin ja sen monet variantit (Noto Sans CJK, Noto Sans Arabic jne.) ilmaisena web-fonttina.
Yhteenveto
CSS @font-face -säännön hallitseminen ja tehokkaiden fonttien lataus- ja optimointistrategioiden toteuttaminen ovat ratkaisevan tärkeitä suorituskykyisten ja visuaalisesti miellyttävien verkkosivustojen luomisessa globaalille yleisölle. Ymmärtämällä fonttimuotojen, lataustekniikoiden ja optimointimenetelmien hienouksia voit tarjota saumattoman ja mukaansatempaavan käyttökokemuksen, joka ylittää maantieteelliset rajat ja kulttuurierot.
Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit varmistaa, että verkkosivustosi typografia parantaa sen yleistä suunnittelua, suorituskykyä ja tarjoaa saavutettavan kokemuksen kaikille käyttäjille heidän sijainnistaan tai laitteestaan riippumatta.